<template>
    <div>
        <h1>柱状图</h1>
        <tab-switching :account="1" :data="menuItems" />
        <div class="bar-chart" :style="{ height: height, width: width }"></div>
    </div>
</template>
<script>
import TabSwitching from '@/components/TabSwitching/TabSwitching.vue';
import menuItems from './ments.js';
import * as echarts from 'echarts';

export default {
    name: 'BarChart',
    components: { TabSwitching },
    data() {
        return {
            menuItems,
            height: '500px',
            width: '600px'
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    methods: {
        initChart() {
            const chartDom = document.querySelector('.bar-chart');
            const myChart = echarts.init(chartDom);
            const option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量', '采购']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        itemStyle: {
                            // 设置圆角
                            borderRadius: [20, 20, 0, 0],
                            // 柱状图宽度
                            barBorderRadius: [20, 20, 0, 0]
                        },
                        data: [5, 20, 36, 10, 10, 20]
                    },
                    {
                        name: '采购',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    // 渐变
                                    { offset: 0, color: '#83bff6' }, // 渐变起始颜色
                                    { offset: 0.5, color: '#188df0' }, // 渐变中间颜色
                                    { offset: 1, color: '#188df0' } //  渐变结束颜色
                                ]),
                                shadowBlur: 10, // 阴影模糊大小
                                shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
                            },
                            emphasis: {
                                shadowBlur: 20, //  鼠标悬停阴影模糊大小
                                shadowColor: 'rgba(0, 0, 0, 0.8)' // 鼠标悬停阴影颜色
                            }
                        },
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    }
};
</script>

<style scoped></style>
